<template>
  <div class="param-editor">
    <el-table :data="modelValue" border stripe class="param-table">
      <el-table-column label="参数名" min-width="140">
        <template #default="{ row }">
          <el-input v-model="row.name" placeholder="参数名" @input="updateParam" />
        </template>
      </el-table-column>

      <el-table-column label="类型" width="120">
        <template #default="{ row }">
          <el-select
            v-model="row.type"
            placeholder="类型"
            @change="updateParam"
            class="type-select"
          >
            <el-option v-for="type in paramTypes" :key="type" :label="type" :value="type" />
          </el-select>
        </template>
      </el-table-column>

      <el-table-column label="必需" width="80" align="center">
        <template #default="{ row }">
          <el-checkbox v-model="row.required" @change="updateParam" />
        </template>
      </el-table-column>

      <el-table-column label="描述" min-width="160">
        <template #default="{ row }">
          <el-input v-model="row.description" placeholder="描述" @input="updateParam" />
        </template>
      </el-table-column>

      <el-table-column label="示例值" min-width="140">
        <template #default="{ row }">
          <el-input v-model="row.example" placeholder="示例值" @input="updateParam" />
        </template>
      </el-table-column>

      <el-table-column label="操作" width="80" align="center">
        <template #default="{ $index }">
          <el-button type="danger" icon="Delete" circle @click="removeParam($index)" />
        </template>
      </el-table-column>
    </el-table>

    <div class="param-actions">
      <el-button type="primary" size="small" icon="Plus" @click="addParam">添加参数</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { ApiParam } from '../ApiDesigner.vue'

export default defineComponent({
  name: 'ParamEditor',
  props: {
    modelValue: {
      type: Array as PropType<ApiParam[]>,
      required: true
    }
  },
  emits: ['update:modelValue', 'add', 'remove'],
  setup(props, { emit }) {
    const paramTypes = ['string', 'number', 'boolean', 'object', 'array', 'file', 'date']

    const updateParam = () => {
      emit('update:modelValue', props.modelValue)
    }

    const addParam = () => {
      emit('add')
    }

    const removeParam = (index: number) => {
      emit('remove', index)
    }

    return {
      paramTypes,
      updateParam,
      addParam,
      removeParam
    }
  }
})
</script>

<style scoped>
.param-editor {
  width: 100%;
}

.param-table {
  width: 100%;
  margin-bottom: 10px;
}

.type-select {
  width: 100%;
}

.param-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 12px;
}
</style>
